<template>
  <div class="spping_div layui-container">
    <p class="spping_p">我的购物车</p>

    <!-- 商品列表 -->
    <div class="spping_Subject">
      <div class="cart-item" v-for="(item, index) in cartItems" :key="item.id">
        <div class="item-info">
          <img :src="item.image" alt="商品图片" class="item-image" />
          <div class="item-details">
            <p class="item-name">{{ item.name }}</p>
            <p class="item-price">￥{{ item.price }}</p>
          </div>
        </div>

        <!-- 商品数量调整 -->
        <div class="item-quantity">
          <lay-input-number
              v-model="item.quantity"
              :min="1"
              :max="10"
              size="sm"
              @change="updateTotalPrice(index)"
          />
        </div>

        <!-- 商品总价 -->
        <div class="item-total">
          <p>￥{{ formatPrice(item.totalPrice) }}</p>
        </div>

        <!-- 勾选框 -->
        <div class="item-checkbox">
          <lay-checkbox v-model="item.selected" @change="updateTotalPrice(index)">选中</lay-checkbox>
        </div>

        <!-- 移除按钮 -->
        <lay-button @click="removeItem(index)" type="danger">移除</lay-button>
      </div>
    </div>

    <!-- 底部结算按钮 -->
    <div class="spping_button">
      <p class="total-price">总价格：￥{{ formatPrice(totalPrice) }}</p>
      <lay-button
          class="checkout-btn"
          @click="checkout"
          type="danger"
          :disabled="!hasSelectedItems">结算
      </lay-button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    // 初始化购物车商品
    const cartItems = ref([
      {
        id: 1,
        name: '苹果 iPhone 14',
        image: 'https://example.com/iphone14.jpg',
        price: 5999,
        quantity: 1,
        totalPrice: 5999,
        selected: true, // 默认选中
      },
      {
        id: 2,
        name: '华为 Mate 40 Pro',
        image: 'https://example.com/huawei_mate40.jpg',
        price: 4999,
        quantity: 2,
        totalPrice: 9998,
        selected: false, // 默认未选中
      },
    ]);

    // 计算总价格
    const totalPrice = computed(() => {
      return cartItems.value.reduce((sum, item) => {
        // 只计算选中的商品
        if (item.selected) {
          return sum + (Number(item.totalPrice) || 0);
        }
        return sum;
      }, 0).toFixed(2);
    });

    // 更新商品总价
    const updateTotalPrice = (index) => {
      const item = cartItems.value[index];
      item.totalPrice = (item.quantity * item.price).toFixed(2);
    };

    // 移除商品
    const removeItem = (index) => {
      cartItems.value.splice(index, 1);
    };

    // 结算
    const checkout = () => {
      layui.layer.msg('结算功能暂未实现');
    };

    // 格式化价格：如果是整数，返回整数；如果是浮动，返回保留两位小数的字符串
    const formatPrice = (price) => {
      let priceFloat = parseFloat(price);
      if (priceFloat % 1 === 0) {
        return priceFloat.toFixed(0); // 如果是整数，则不显示小数点
      }
      return priceFloat.toFixed(2); // 否则显示两位小数
    };

    // 检查是否有选中的商品
    const hasSelectedItems = computed(() => {
      return cartItems.value.some(item => item.selected);
    });

    return {
      cartItems,
      totalPrice,
      updateTotalPrice,
      removeItem,
      checkout,
      formatPrice,
      hasSelectedItems,
    };
  },
};
</script>

<style scoped>
/* 容器样式 */
.spping_div {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: Arial, sans-serif;
}
.spping_p {
  font-weight: bold;
  font-size: 28px;
  margin-bottom: 20px;
}

/* 商品列表样式 */
.spping_Subject {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 10px;
}

.cart-item {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 10px;
}

.item-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
}

.item-details {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-size: 16px;
  font-weight: bold;
}

.item-price {
  color: #f46b6b;
}

.item-quantity {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.item-quantity span {
  margin: 0 10px;
}

.item-total {
  font-weight: bold;
  margin-left: 62px;
  margin-right: 62px;
}

.item-checkbox {
  margin-left: 10px;
}

.total-price {
  font-size: 20px;
  font-weight: bold;
}

.spping_button {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
}
</style>
